<template>
  <view
    class="nav"
    :style="{
      borderBottom: border ? '1rpx solid #eeeeee' : 'none',
      paddingTop: hasMenuButtonTop ? menuButtonTop + 'px' : '0'
    }"
  >
    <view
      class="nav-tab"
      :style="{ height: height + 'rpx' }"
    >
      <view
        v-for="(tab, index) in tabs"
        :key="tab"
        class="nav-tab-item"
        :class="{ active: activeIndex === index }"
        @tap="handleTabClick(index)"
      >
        <image
          v-if="isImg(tab)"
          :src="tab"
          class="nav-tab-item-image"
          mode="heightFix"
        />
        <text
          v-else
          class="nav-tab-item-title"
        >
          {{ tab }}
        </text>
      </view>

      <view
        class="indicator-wrap"
        :style="indicatorWrapStyle"
      >
        <view
          class="indicator"
          :style="{ width: indicatorWidth + 'rpx' }"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "NavTab",
  model: { prop: "current", event: "input" },
  props: {
    current: {
      type: Number,
      default: 0
    },
    items: {
      type: Array,
      default: () => []
    },
    customStyle: {
      type: Object | String,
      default: () => ({})
    },
    height: {
      type: Number | String,
      default: 72
    },
    indicatorWidth: {
      type: Number | String,
      default: 40
    },
    border: {
      type: Boolean,
      default: false
    },
    hasMenuButtonTop: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tabs: this.items,
      activeIndex: this.current,
      menuButtonTop: this.$menuButtonTop
    }
  },
  created() {},
  computed: {
    indicatorWrapStyle() {
      const translatePercent = this.activeIndex * 100
      const tabCount = this.tabs && this.tabs.length ? this.tabs.length : 1
      const widthPercent = 100 / tabCount
      return `transform: translateX(${translatePercent}%); width: ${widthPercent}%;`
    },
    isImg() {
      return item =>
        typeof item === "string" && /\.(png|jpg|jpeg|gif|webp)$/i.test(item)
    }
  },
  methods: {
    handleTabClick(index) {
      if (index === this.activeIndex) return
      this.activeIndex = index
      this.$emit("input", index)
      this.$emit("change", index)
    }
  },
  watch: {
    current: {
      immediate: true,
      handler(newVal) {
        if (newVal !== this.activeIndex) {
          this.activeIndex = newVal
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.nav {
  width: 100%;
  background-color: #ffffff;
  z-index: 99;
}

.nav-tab {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-tab-item {
  flex: 1;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.nav-tab-item-image {
  height: 80rpx;
}

.nav-tab-item-title {
  font-size: 26rpx;
  color: #777;
}

.nav-tab-item.active .nav-tab-item-title {
  color: #1a1a1a;
  font-weight: 600;
}

.indicator-wrap {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 33.3333%;
  height: 6rpx;
  display: flex;
  justify-content: center;
  transition: transform 200ms ease;
}

.indicator {
  height: 6rpx;
  background-color: #e60012;
  border-radius: 6rpx;
}
</style>
